<template>
	<view class="content">

		<view class="title">AI金字塔</view>
		<u-subsection :list="list" :current="curNow" @change="sectionChange" active-color="#1488FF"></u-subsection>

		<view class="dropdown">
			<u-dropdown>
				<u-dropdown-item v-model="market" title="市场" :options="marketList"></u-dropdown-item>
				<u-dropdown-item v-model="coin" title="币种" :options="coinList"></u-dropdown-item>
			</u-dropdown>
		</view>

		<view class="form" v-if="curNow == 0">
			<view>
				<aqie-input placeholder="初始资金(USDT)" width="660" height='60'></aqie-input>
			</view>
			<view class="form-line flex">
				<view class="slide">
					<u-slider v-model="slideValue" :use-slot="true" min="25" max="100" step="25">
						<view class="">
							<view class="badge-button">
								{{slideValue/5}}倍
							</view>
						</view>
					</u-slider>
				</view>
				<view class="right subsection">
					<u-subsection :list="directlist" mode="subsection" :current="current" @change="subsectionChange"
						active-color="#ff9900"></u-subsection>
				</view>
			</view>
			<view class="btn">
				<u-button shape="circle" :ripple="true" ripple-bg-color="#909399" :custom-style="customStyle">完成
				</u-button>
			</view>
		</view>
		
		<view class="form" v-if="curNow == 1">
			<scroll-view scroll-y="true" style="height: 1000rpx;">
			<view class="flex">
				<aqie-input placeholder="初始资金(USDT)" width="310" height='60'></aqie-input>
				<aqie-input placeholder="首开数量" width="310" height='60'></aqie-input>
			</view>
			<view class="form-line flex">
				<view class="slide">
					<u-slider v-model="slideValue" :use-slot="true" min="25" max="100" step="25" round height="16" active-color='#FFB400'>
						<view class="">
							<view class="badge-button">
								{{slideValue/5}}x
							</view>
						</view>
					</u-slider>
				</view>
				<view class="right subsection">
					<u-subsection :list="directlist" mode="subsection" :current="current" @change="subsectionChange"
						active-color="#ff9900"></u-subsection>
				</view>
			</view>
			<view class="flex-w form-line">
				<aqie-input placeholder="最大补仓" width="300" height='60'></aqie-input>
				<aqie-input placeholder="平仓利润间距" width="300" height='60'></aqie-input>
				<aqie-input placeholder="阶梯一间隔" width="300" height='60'></aqie-input>
				<aqie-input placeholder="数量" width="300" height='60'></aqie-input>
				<aqie-input placeholder="阶梯二间隔" width="300" height='60'></aqie-input>
				<aqie-input placeholder="数量" width="300" height='60'></aqie-input>
				<aqie-input placeholder="阶梯三间隔" width="300" height='60'></aqie-input>
				<aqie-input placeholder="数量" width="300" height='60'></aqie-input>
				<aqie-input placeholder="区间上沿" width="300" height='60'></aqie-input>
				<aqie-input placeholder="区间下沿" width="300" height='60'></aqie-input>
			</view>
			<view class="flex-w form-line">
				<aqie-input placeholder="熔断保护" width="300" height='60'></aqie-input>
				<view class="form-item">
					<text>AI趋势指标</text>
					<u-switch v-model="checked" size=60></u-switch>
				</view>
				<view class="form-item">
					<text>错峰等待</text>
					<u-switch v-model="checked" size=60></u-switch>
				</view>
				<aqie-input placeholder="回撤比例" width="300" height='60'></aqie-input>
				<view class="form-item">
					<text>追踪止盈</text>
					<u-switch v-model="checked" size=60></u-switch>
				</view>
				<aqie-input placeholder="回撤比例" width="300" height='60'></aqie-input>
			</view>
			<view class="btn">
				<u-button shape="circle" :ripple="true" ripple-bg-color="#909399" :custom-style="customStyle">完成
				</u-button>
			</view>
			</scroll-view>
			
			
		</view>
		
	</view>
</template>

<script>
	import aqieInput from '@/components/base/aqie-input.vue';
	export default {
		components: {
			aqieInput
		},
		data() {
			return {
				list: [{
						name: "AI策略",
					},
					{
						name: "手动设置",
					},
				],
				// 当前页面
				curNow: 1,
				// dropdown
				market: 1,
				coin: 1,
				marketList: [{
						label: "Huobi现货",
						value: 1,
					},
					{
						label: "Binance现货",
						value: 2,
					},
					{
						label: "Okex现货",
						value: 3,
					},
				],

				coinList: [{
						label: "BTC1S/USDT",
						value: 1,
					},
					{
						label: "BTC/USDT",
						value: 2,
					},
				],
				// form
				slideValue: 25,
				current: 0,
				customStyle: {
					color: '#fff',
					width: '686rpx',
					height: '90rpx',
					backgroundColor: '#1488FF'
				},
				directlist: [{
						name: "做多",
					},
					{
						name: "做空",
					},
				],
				checked:'true'
			};
		},
		onLoad() {},
		mounted() {},
		computed: {},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			
			subsectionChange(index) {
				this.current = index;
			}
		},
	};
</script>

<style lang='scss' scoped>
	.content {
		padding: 20rpx 32rpx;
		min-height: 1028rpx;
		.title {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.u-subsection {
			margin: 20rpx 0 10rpx 0;
			height: 90rpx !important;

			/deep/.u-item-bg {
				height: 80rpx !important;
			}
		}

		.btn {

			margin: 32rpx auto;
		}

		.form {
			.slide {
				width: 50vw;
				margin-top: 30rpx;
				margin-right: 30rpx;
			}

			.form-line {
				// padding: 0 5rpx;
				.u-subsection {
					width: $w/2;
					margin: 40rpx 0 10rpx 0;
					height: 80rpx !important;
					border-radius: 40rpx;
					/deep/.u-item:nth-child(1){
						border-radius: 40rpx 0 0 40rpx;
					}
					/deep/.u-item:nth-child(2){
						border-radius: 0rpx 40rpx 40rpx 0rpx;
					}
					/deep/.u-item-bg {
						height: 80rpx;

					}
				}
				/deep/.input-block{
					margin-bottom: 10rpx;
				}
				.form-item{
					min-width:330rpx;
					display: flex;
					align-items: center;
					color: #333333;
					justify-content: space-between;
				}
			}

			.badge-button {
				padding: 4rpx 6rpx;
				background-color: #FFB400;
				color: #fff;
				border-radius: 10rpx;
				font-size: 22rpx;
				line-height: 1;
			}
		}
	}
</style>
